<template>
    <div class="wrapper-details">
        <div class="header">
            <p>
                <van-icon name="arrow-left" class="left" @click="out"/>
                讲师详情
            </p>
        </div>
        <div class="tab">
            <img :src="list.avatar" style="width:1.4rem;height:1.4rem;"/>
            <p>{{list.real_name}} 男  800年教龄</p>
            <button class="btn">取消关注</button>
        </div>

        <van-tabs v-model="active">
            <van-tab title="讲师介绍"></van-tab>
            <van-tab title="主讲课程"></van-tab>
            <van-tab title="学员评价">
                <van-empty description="暂无数据" />
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { detailsList } from "../request/http";
export default {
  data() {
    return {
      list: {},
      active:0
    };
  },
  mounted() {
    detailsList(this.$route.query.id).then(res => {
      console.log(res.data.data.teacher);
      this.list = res.data.data.teacher;
    });
  },
  methods: {
      out(){
          this.$router.push('/')
      }
  }
};
</script>

<style lang="scss" scoped>
.wrapper-details {
  width: 100%;
  .tab {
    width: 90%;
    height: 2.5rem;
    background: white;
    border-radius: 0.3rem;
    margin: 0 auto;
    position: relative;
    top: -1rem;
    box-sizing: border-box;
    padding: 0.6rem;
    display: flex;
    p {
      width: 2.7rem;
      margin-top: 0.5rem;
    }
    .btn {
      display: inline-block;
      margin-left: 2.5rem;
      border: 0.01rem solid pink;
      height: 0.5rem;
      margin-top: 0.5rem;
      width: 2rem;
      background: white;
      border-radius: 0.2rem;
    }
    img{
        border-radius: 50%;
    }
  }
  .header {
    width: 100%;
    height: 2.5rem;
    background: rgb(93, 184, 245);
    box-sizing: border-box;
    padding: 0.2rem;
    color: white;
    p {
      width: 100%;
      font-size: 0.45rem;
      text-align: center;
      .left {
        float: left;
        font-size: 0.6rem;
      }
    }
  }
}
</style>